<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../../pqgrid/pqgrid.min.css" />
    <script src="../../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../../pqgrid/themes/office/pqgrid.css" />

<script>
    
    $(function () {
        var colModel = [
    		{ title: "Title", dataType: "string", width: "150", dataIndx: 'title' },
	    	{ title: "Rights", dataType: "string", width: 150, dataIndx: 'rights' },		
            { title: "Price", dataType: "float", width: 70, dataIndx: 'price', align:"right", render:function(ui){
                var rowData=ui.rowData, cV=rowData[ui.dataIndx];
                return "$"+cV;
            }},		
    		{ title: "Content", width: 320, dataIndx: 'content', dataType: "html" },
            { title: "Artist", dataType: "string", width: 120, dataIndx: 'artist' }
		];

        var dataModel = {
            cache: true,
            location: "remote",                                    
            sortDir: "down",
            sorting: "local",                        
            dataType: "xml",
            url: "https://paramquery.com/Content/apple-albums.xml",            
            getData: function (dataDoc) {
                //debugger;
                $(dataDoc).find("price").each(function(i,pNode){
                    var txt=$(pNode).text();
                    txt=txt.replace("$","");
                    $(pNode).text(txt);                    
                });                                
                var obj = { itemParent: "entry", itemNames: ["artist", "title", "rights", "price", "content" ] };
                return { data: $.paramquery.xmlToJson(dataDoc, obj) };
            }
        };
        var obj={             
            height: 'flex',
            dataModel: dataModel,
            editModel: {keyUpDown:false},
            colModel: colModel,
            pageModel: { rPP: 2, type: "local", rPPOptions: [1, 2, 3, 4,  5, 10, 20, 100]},
            editor: { type: 'contenteditable', cls:'pq-native-select pq-no-capture'},
            title: "<b>Albums Feed Reader</b>",            
            draggable: true,
            //resizable:true,            
            scrollModel: {autoFit:true, flexContent: true},
	        freezeCols: 0
        };
        
        var $grid=$("div#xml_grid").pqGrid(obj);                        
    });
        
</script>    
</head>
<body>

<div id="xml_grid" style="margin:auto;"></div>

</body>

</html>
